import React, {useState, useRef } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { defaultSearchConfig } from '@/defaultColConfig';
import { getPortList ,updatePort,takePortOffline,takePortOnline} from '@/services/loc';
import type { IPortInfo, IPortListArgs } from '@/models/loc';

import {  Modal,message,Space ,Divider,Tooltip,Badge} from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { handleAction } from '@/utils/myUtils';
import SetPortOfflineForm from './components/SetPortOfflineForm';
import moment from 'moment';


export default () => {
  const [portRow, setCurrentRow] = useState<IPortInfo>();
  const [offlineModalVisible, setOfflineModalVisible] = useState<boolean>(false);

  const actionRef = useRef<ActionType>();
  const columns: ProColumns<IPortInfo>[] = [
    {
      title: '编码',
      dataIndex: 'portCode',
      sorter: true,
    },
    {
      title: 'KP1',
      dataIndex: 'kP1',
      search: false,
    },
    {
      title: 'KP2',
      dataIndex: 'kP2',
      search: false,
    },
    {
      title: '巷道',
      dataIndex: 'streetlets',
      search: false,
      renderText: (val: string[]) => val.join(', '),
    },
    {
      title: '单据',
      dataIndex: 'currentUat',
      search: false,
      tooltip: '正在出货口自动下架的单据',
    },
    {
      title: '检查时间',
      dataIndex: 'checkedAt',
      search: false,
      tooltip: '最近一次检查自动下架的时间',
      render: (record) => <span>{moment(record.checkedAt).format('YYYY-MM-DD HH:mm:ss')}</span>,
    },
    {
      title: '检查消息',
      dataIndex: 'checkMessage',
      search: false,
      tooltip: '最近一次检查自动下架的消息',
    },
    {
      title: '状态',
      search: false,
      tip: '脱机状态下不会下发新的任务，但已有任务会继续执行',
      render: (_, record) => (
        <Tooltip title={record.offlineComment}>
          {
            record.offline ?
              <Badge status='error' text='脱机' />
              : <Badge status='success' text='联机' />
          }
        </Tooltip>
      ),
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => (

        <Space size="middle">
          <>
          <a
            onClick={() => {
              setCurrentRow(record);
              setOfflineModalVisible(true);
            }}
          >
            {record.offline ? '联机' : '脱机'}
          </a>
          <Divider type="vertical" />

          {record.currentUat!=null&&
          <a
           onClick={() => {
           if(record.currentUat==null)
           {
            message.info('当前出货口没有单据需要分离！');
           }else{
              Modal.confirm({
                title: '确认要分离吗?',
                icon: <ExclamationCircleOutlined />,
                content: `正在从出货口: ${record.portCode} 分离单据: ${record.currentUat} ,分离后，将不会为: ${record.currentUat} 向: ${record.portCode} 发送新的下架任务，已发送的任务会继续执行.`,
                okText: '确认',
                okType: 'danger',
                cancelText: '取消',
                async onOk() {
                  const success = await handleAction(() => updatePort(record.portId));
                  if (success) {
                    if (actionRef.current) {
                      actionRef.current.reload();
                    }
                  }
                },
                onCancel() {
                },
              });}
           }}
          >
            分离单据
          </a>
          }

       </>

          </Space>
      ),
    },
  ];

  return (
    <PageContainer>
      <ProTable<IPortInfo, IPortListArgs>
        headerTitle="出货口列表"
        actionRef={actionRef}
        rowKey="portId"
        search={defaultSearchConfig}
        toolBarRender={() => []}
        request={getPortList}
        columns={columns}
      />

   {portRow && offlineModalVisible && (
        <SetPortOfflineForm
          onTakeOffline={async value => {
            const success = await handleAction(() => takePortOffline(portRow.portId, value));
            if (success) {
              setOfflineModalVisible(false);
              setCurrentRow(undefined);
              if (actionRef.current) {
                actionRef.current.reload();
              }
            }
          }}
          onTakeOnline={async value => {
            const success = await handleAction(() => takePortOnline(portRow.portId, value));
            if (success) {
              setOfflineModalVisible(false);
              setCurrentRow(undefined);
              if (actionRef.current) {
                actionRef.current.reload();
              }
            }
          }}
          onCancel={() => {
            setOfflineModalVisible(false);
            setCurrentRow(undefined);
          }}
          values={portRow}
        />
      )}

    </PageContainer>
  );
};

